<template>
	<div class="songs">
		<div class="songs-header">
			<div>操作</div>
			<div>标题</div>
			<div>歌手</div>
			<div>专辑</div>
			<div>时间</div>
		</div>
		<div class="songs-content" v-for="song in tableData" :key="song.id" :class="{ oddnum: song.index % 2 !== 0 }" @click="playHandler(song.index, song.id)">
			<div class="songs-content-left">
				<span>{{ song.index > 9 ? song.index : '0' + song.index }}</span>
				<span><heart-outlined /></span>
				<span><download-outlined /></span>
			</div>
			<div class="songs-content-title">
				<span>{{ song.name }}</span>
				<span class="vip-tap" v-if="song.fee === 1">VIP</span>
				<span class="sq-tap" v-if="song.sq">SQ</span>
				<span class="mv-tap" v-if="song.mv !== 0">MV></span>
			</div>
			<div class="songs-content-ar">
				<span v-for="n in song.ar" :key="n.id">{{ n === song.ar[0] ? n.name : ' / ' + n.name }}</span>
			</div>
			<div class="songs-content-al">
				<span>{{ song.al.name }}</span>
			</div>
			<div class="songs-content-dt">
				{{ transformationTime(song.dt) }}
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { getResourceAllSongsApi } from '@/api/songs'
import router from '@/router/index'
import { HeartOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import { transformationTime } from '@/utils/handler'
import { playIdStore, type IPlayList } from '@/stores/playSong'
import bus from '@/utils/bus'

interface ITableData {
	index: number,
	readonly id: number,
	name: string,
	dt: number,
	ar: [{ name: string, id: number }],
	al: { id: number, name: string, picUrl: string },
	fee: number,
	mv: number,
	sq: {} | null
}
let tableData = ref<ITableData[]>([])
const songsProps = defineProps(['songList'])
let infoList = ref<any>({})
let creatorInfo = ref({})
const play = playIdStore()

const getInfo = async () => {
	infoList.value = songsProps.songList
	creatorInfo.value = songsProps.songList.creator
	const songs = await getResourceAllSongsApi(router.currentRoute.value.query.id as unknown as number)
	console.log('songs', songs);
	
	tableData.value = []
	songs.songs.forEach((item, index) => {
		tableData.value.push({
			index: index + 1,
			id: item.id,
			name: item.name,
			// 时长
			dt: item.dt,
			// 歌手
			ar: item.ar,
			// 专辑
			al: { id: item.al.id, name: item.al.name, picUrl: item.al.picUrl },
			// fee: 0 免费或无版权, 1 VIP歌曲, 4 购买专辑, 8 非会员可播放低音质,会员可播放高音质及下载
			fee: item.fee,
			// mv: 非零为有mv
			mv: item.mv,
			sq: item.sq
		})
	})
}

const playHandler = (playIndex: number, id: number) => {
	play.playInfo = []
	play.playIds = ''
	play.playArrIds = []
	tableData.value.forEach((item, index) => {
		if (index >= playIndex - 1) {
			play.playInfo.push({
			id: item.id,
			name: item.name,
			ar: item.ar,
			al: item.al,
			fee: item.fee,
			mv: item.mv,
			sq: item.sq
		})
		play.playArrIds.push(item.id)
		}
	})
	tableData.value.forEach((item, index) => {
		if (index < playIndex - 1) {
			play.playInfo.push({
			id: item.id,
			name: item.name,
			ar: item.ar,
			al: item.al,
			fee: item.fee,
			mv: item.mv,
			sq: item.sq
		})
		play.playArrIds.push(item.id)
		}
	})
	play.playIds = play.playArrIds.join(',')
	play.playArrIds.forEach((item, index) => {
		if (item === id) {
			return play.playIndex = index
		}
	})
	play.playId = id
	console.log('info',play.playInfo);
	
}

const count = (num: number) => {
	if (num > 99999999) return Math.floor(num / 100000000) + '亿'
	else if (num > 9999) return Math.floor(num / 10000) + '万'
	else return num
}


watch(play.playInfo, (val) => {
	localStorage.setItem('playList', JSON.stringify(val))
})



onMounted(() => {
	new Promise(() => {
		getInfo().then(() => {
			bus.$on('playall', (val) => {
				playHandler(0, tableData.value[0].id)
		})
	})
	})
	
})


</script>

<style lang="scss">
@import '@/styles/config.scss';

.songs {
	width: 100%;
	cursor: default;

	&-header {
		height: 3vw;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: #B6B6D0;
		align-items: center;
		font-size: 1.3vw;

		&>div:nth-child(n+2):hover {
			background-color: #373737;
		}

		&>div:nth-child(1) {
			width: 10%;
			text-align: center;
		}
		&>div:nth-child(2) {
			padding: 0 3vw;
			text-align: left;
			width: 35%;
		}
		&>div:nth-child(3) {
			width: 18vw;
		}
		&>div:nth-child(4) {
			width: 18vw;
		}
		&>div:nth-child(5) {
			width: 9vw;
			text-align: center;
		}
	}

	& > .oddnum {
		background-color: #2F2F2F;
	}


	&-content {
		width: 100%;
		display: flex;
		flex-direction: row;
		&:hover {
			background-color: #373737;
		}

		&-left {
			width: 10%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 1.5vw;

			& > span {
				color: #707070;
			}
			& > span:nth-child(1) {
				color: #707070;
			}
			& > span:nth-child(n+2) {
				cursor: pointer;
				&:hover {
					color: #B6B6D0;
				}
			}
		}

		&-title {
			display: flex;
			flex-direction: row;
			justify-content: start;
			align-items: center;
			padding: 0 3vw;
			width: 35%;

			& > span:nth-child(1) {
				color: #B6B6D0;
				font-size: 1.3vw;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 1vw;

			}
			& > span:nth-child(n+2) {
				border: 1px solid #ec4e4e;
				color: #ec4e4e;
				border-radius: 5%;
				font-size: 0.6vw;
				margin-left: 0.2vw;
				padding: 0.08vw 0.2vw;
				line-height: 1;
				align-self: center;
			}

			& > .mv-tap {
				cursor: pointer;
			}
			& > .nv-tap:hover {
				color: #D71717;
				border-color: #D71717;
			}
		}

		&-ar, &-al {
			color: #707070;
			font-size: 1.3vw;
			width: 18vw;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			&>span:hover {
				color: #B6B6D0;
				cursor: pointer;
			}
		}

		&-dt {
			color: #707070;
			font-size: 1.3vw;
			text-align: center;
			width: 9vw;
		}
	}
}
</style>